<template>
    <div style="height:100vh">
        <vxe-grid v-bind="gridOptions">
            <template #toolbar_buttons>
                <center>
                    <h2 class="theme">fixed固定列区域的多选框（开启range），当固定列出现后又消失（调整窗口大小），从上往下框选时无作用，从下往上框选时可以选中，但没有框选的视觉效果</h2>
                </center>
            </template>
        </vxe-grid>
    </div>
</template>

<script>
export default {
    data() {
        const colLength = 10;
        const dataLength = 100;
        return {
            gridOptions: {
                toolbar: {
                    slots: {
                        buttons: "toolbar_buttons",
                    },
                    // perfect: true,
                    // export: true,
                    // custom: true,
                },
                checkboxConfig: {
                    //  trigger: "default",
                    // labelField: 'id',
                    // reserve: true,
                    // checkField: "checked",
                    // highlight: true,
                    range: true,
                },
                scrollY: {
                    gt: 0,
                },
                size: "medium",
                autoResize: true,
                showOverflow: true,
                height: "auto",
                border: true,
                resizable: true,
                data: new Array(dataLength).fill(1).map((row, idx) => {
                    let o = {};
                    for (let i = 0; i < colLength; i++) {
                        o[`col${i + 1}`] = Math.floor(Math.random() * 100 + 1);
                    }
                    return o;
                }),
                columns: [{ type: "checkbox", title: "选择", width: 90, align: "center", fixed: "left" }].concat(
                    new Array(colLength).fill(1).map((col, idx) => {
                        return {
                            field: `col${idx + 1}`,
                            title: `col${idx + 1}`,
                            width: 110,
                            sortable: true,
                        };
                    })
                ),
            },
        };
    },
};
</script>

<style></style>
